<template>
  <div class="count">
    <h2>我是count组件</h2>
    <p>count的值是{{ count }}</p>
    <p>电脑的价格是：{{ price }}</p>
    <button @click="addCount()">累加</button>
  </div>
</template>

<script>
export default {
  props: ["addCount", "count"],
  data() {
    return {
      price: 49999,
    };
  },

  // 数据劫持和数据代理之前,没有数据，methods等等
  beforeCreate() {
    console.log("######beforeCreate#########");
  },

  // 数据劫持和数据代理之后,数据和方法等等已经加载
  created() {
    console.log("######created#########");
  },
  // 挂载前，此时还没有生成dom
  beforeMount() {
    console.log("######beforeMount#########");
  },
  // 挂载完成，至此所有的渲染阶段全部完成
  mounted() {
    console.log("######mounted#########");
  },

  // 视图更新前，此时数据已更新，视图未更新，视图和数据不一致
  beforeUpdate() {
    console.log("######beforeUpdate#########");
  },
  // 视图更新完成，视图和数据已同步
  updated() {
    console.log("######updated#########");
  },
  // 销毁前，
  beforeDestroy() {
    console.log("######beforeDestroy#########");
  },
  //销毁
  destroyed() {
    console.log("######destroyed#########");
  },
};
</script>

<style scoped>
.count {
  background-color: pink;
}
</style>